<template>
	<div class="login">
		<div class="login-wrap animate__animated animate__fadeInDownBig">
			<div class="login-header">
				<div class="title">客户方案管理系统</div>
				<p>怡生暖通有限公司</p>
			</div>
			<div class="login-body">
				<el-form :model="form" ref="form" :rules="rules">
					<el-form-item prop="username">
						<el-input type="text" v-model="form.username" 
						@keyup.enter.native="submitForm('form')"
						placeholder="请输入登录账号"
						autocomplete="off">
							<i slot="prefix" class="el-input__icon el-icon-user"></i>
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password" v-model="form.password" 
						show-password
						@keyup.enter.native="submitForm('form')"
						placeholder="请输入登录密码"
						autocomplete="off">
							<i slot="prefix" class="el-input__icon el-icon-lock"></i>
						</el-input>
					</el-form-item>
					<el-checkbox v-model="form.checked" class="checked">记住登录账号</el-checkbox>
					<el-form-item>
						<el-button @click="resetForm('form')">重新填写</el-button>
						<el-button type="primary" @click="submitForm('form')" :loading="loading">登录后台</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	data(){
		return{
			loading: false,
			form: {
				username: '',
				password: '',
				checked : true
			},
			rules: {
				username: [
					{ required: true, message: '请输入登录账号', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '请输入登录密码', trigger: 'blur' }
				],
			}
		}
	},
	mounted(){
		let arr  = {
			password: '',
			username: '',
			checked : true
		},
		userinfo = this.$storage.localGet('userinfo');
		if(userinfo !== null){
			arr  = {
				password: '',
				username: userinfo.username,
				checked : true
			}
			this.form = arr;
		}else{
			this.$storage.localSet('userinfo',arr);
		}
	},
	methods:{
		login(){
			let vm = this;
			vm.loading = true;
            vm.$api.init.login(vm.form.username,vm.form.password).then(res=> {
				let data = res.data;
				if(data.code == 200){
					vm.$router.push('/');
					vm.loading = false;
					vm.$store.commit('codeTips',data.userinfo);
					vm.$storage.localSet('userinfo',data.userinfo);
				}
				else{
					vm.loading = false;
					vm.$message.error(data.msg);
				}
			})
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.login();
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.loading = false;
			this.$refs[formName].resetFields();
		}
	}
}
</script>
<style lang="less" scoped>
.login{
	width: 100%;
	height: 100%;
	position: absolute;
	.login-wrap{
		width: 390px;
		height: 400px;
		top: 50%;
		left: 50%;
		border-radius: 20px;
		z-index: 1;
		position: absolute;
		background-color: #fff;
		margin-left: -195px;
		margin-top: -200px;
		box-shadow: 0 30px 80px -20px rgba(0, 0, 10, 0.1), 0 30px 70px -30px rgba(0, 0, 0, 0.5);
	}
	.login-header{
		height: 120px;
		color: #fff;
		text-align: center;
		padding: 32px 0 0;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;
		background-image: linear-gradient(180deg, #FB6603 0%, #FA7B00 100%);
		&::before,
		&::after{
			content: '';
			display: block;
			position: absolute;
			border-radius: 100%;
			background-color: #fff;
		}
		&::after{
			width: 80px;
			height: 80px;
			right: -20px;
			top: -20px;
			opacity: .12;
		}
		&::before{
			width: 120px;
			height: 120px;
			left: -50px;
			bottom: -50px;
			opacity: .08;
		}
		border-radius: 15px 15px 0 0;
		.title{
			font-size: 26px;
			font-weight: 700;
		}
		p{
			font-weight: 300;
		}
	}
	.login-body{
		padding: 35px;
		box-sizing: border-box;
		/deep/.el-input__inner{
			border-radius: 0;
			border-width: 0 0 1px 0;
			&:focus{
				border-color: #FB6603;
			}
		}
		/deep/.el-form-item__content{
			display: flex;
			.el-button{
				flex: 1;
			}
		}
		.checked{
			margin: 0 0 15px 10px;
			/deep/.el-checkbox__label{
				font-size: 12px;
				padding-left: 5px;
				font-weight: 400;
			}
			/deep/.is-checked + .el-checkbox__label{
				color: #999;
			}
			/deep/.el-checkbox__inner{
				border-color: #FB6603;
			}
			/deep/.is-checked{
				.el-checkbox__inner{
					border-color: #FB6603;
					background-color: #FB6603;
				}
			}
		}
		/deep/.el-button--primary{
			border-color: #FB6603;
			background-color: #FB6603;
		}
	}
}
</style>
